import React from 'react'
import { IChartProps } from '../'
import { ScrollBoard } from '@jiaminghi/data-view-react'

export class Assembly extends React.PureComponent<IChartProps> {
  private getObjectKeys = (object) =>{ //拿到展示的key值
        let keys = [];
        for (let property in object)
            keys.push(property);
        return keys;
    }

  private getObjectValues = (object) => {  //拿到对象集合的value值
      let values = [];
      for (let property in object)
          values.push(object[property]);
      return values;
  }

  public render () {
    const {  data , chartStyles } = this.props
    const { carousel } = chartStyles

    let config ={}
    if(carousel){
      const {  align,carousels,columnWidth,evenRowBGC,headerBGC,headerHeight,hoverPause,index,indexHeader,oddRowBGC,rowNum,waitTime} = carousel
      config = {
        align:[align],
        columnWidth:[columnWidth],
        carousel:carousels,
        evenRowBGC:evenRowBGC,
        headerBGC:headerBGC,
        headerHeight:headerHeight,
        hoverPause:hoverPause,
        index:index,
        indexHeader:indexHeader,
        oddRowBGC:oddRowBGC,
        rowNum:rowNum,
        waitTime:waitTime,
        header:[],
        data:[],
      }
    }

    let keyLists = [];
    let valueLists = []
    data.map((item,key) => {
      keyLists = this.getObjectKeys(item);
      valueLists.push(this.getObjectValues(item))
    })

    config = {...config,header:keyLists,data:valueLists}
    return (
      <div>
          {/* {'测试组件'} */}
          <ScrollBoard config={config} 
          style={{
            height: (carousel?.height? carousel?.height + 'px':'210px' ),
            color: (carousel?.color? carousel?.color:'#ccc' ),
            width: (carousel?.width? carousel?.width + 'px':'420px' )
          }} />
      </div>
    )
  }
}

export default Assembly
